<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>查询用户</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/page.css">
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../laydate/laydate.js"></script>
    <script src="../js/city-picker.data.js"></script>
    <script src="../js/city-picker.js"></script>
    <script src="../js/publicJS.js"></script>
    <style>
        .city-picker-span {
            width: 300px;
        }
        .paginList {
            width: 1000px;
            height: 50px;
            margin-top: 100px;
        }

        .activp {
            background-color: #367fa9 !important;
            color: #fff !important;
        }
    </style>
</head>

<body style="background:#328f46">
<div class="headiv">
    <div class="logotag">
        <a class="logo"><img src="../img/logo.png" width="440" height="65"></a>
        <b class="line"></b>
    </div>
    <a class="username">欢迎登录：<i id="name"></i></a>
    <span class="btnbox">
    	<a class="update" href="#" title="修改"></a><a class="exit" href="/logout" title="退出"></a>
    </span>
    <div class="clear" style="height:20px; background:#328f46"></div>
</div>

<div class="messagebox">
    <div class="messageleft">
        <ul class="Fstage">
            <shiro:hasRole name="normalUser">
                <li><a href="#"><em class="e3"></em>健康信息管理
                    <div class="clear"></div>
                </a>
                    <ul class="Tstage">
                        <li><a href="/healthInfoAdd">健康信息录入</a></li>
                        <li><a href="/healthInfoSelect">健康指数查询</a></li>
                    </ul>
                </li>
                <li><a href="#"><em class="e3"></em>运动信息管理
                    <div class="clear"></div>
                </a>
                    <ul class="Tstage">
                        <li><a href="/sportIndex">运动信息录入</a></li>
                        <li><a href="/sportIndexSelect">运动信息查询</a></li>
                    </ul>
                </li>
                <li><a href="#"><em class="e3"></em>心理测试
                    <div class="clear"></div>
                </a>
                    <ul class="Tstage">
                        <li><a href="/testPage">开始测试</a></li>
                        <li><a href="/testrecord">测试记录</a></li>
                    </ul>
                </li>
                <li><a href="#"><em class="e3"></em>健康新闻
                    <div class="clear"></div>
                </a>
                    <ul class="Tstage">
                        <li><a href="/healthnewsPage">健康新闻</a></li>
                    </ul>
                </li>
            </shiro:hasRole>

            <shiro:hasRole name="admin">
                <li><a href="#"><em class="e3"></em>用户管理
                    <div class="clear"></div>
                </a>
                    <ul class="Tstage">
                        <li><a href="/userManagement">用户管理</a></li>
                        <li><a href="/userManageSelect">查询所有用户</a></li>
                    </ul>
                </li>
                <li><a href="#"><em class="e3"></em>发布新闻
                    <div class="clear"></div>
                </a>
                    <ul class="Tstage">
                        <li><a href="/releaseNewsPage">发布新闻</a></li>
                    </ul>
                </li>
            </shiro:hasRole>
        </ul>
    </div>
    <!--****************以上不能动，页面固定的东西************************-->
    <div class="messageright formpage">
        <br>
        用户信息：
        <table class="table">
            <tr>
                <th>昵称：</th>
                <th>登录名：</th>
                <th>签名：</th>
                <th>性别：</th>
                <th>电话</th>
                <th>地区</th>
                <th>星座：</th>
                <th>生日：</th>
                <th>邮箱：</th>
                <th>注册时间</th>
            </tr>
            <tbody id="tbody">

            </tbody>
        </table>
        <div class="paginList"></div>
    </div>
</div>

<script src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/js/page.js"></script>
<script>
    showAllUser();
    function showAllUser() {
        $.ajax({
            url: "/selecctUserAll",
            type: "post",
            data:{
                pageNum:1
            },
            success: function (result) {
                console.log(result);
                //先清空原来的表格内容
                $("#tbody").empty("");
                for (var i in result.data.list){
                    appendData(result.data.list[i])
                }
                pagess(result.data.pages);
            },
            error: function () {
                alert("错误");
            }
        })
    }

    function appendData(user) {
        var trs = $("<tr>" +
                       "<td>"+user.nickname+"</td>" +
                       "<td>"+user.loginname+"</td>" +
                       "<td>"+user.signature+"</td>" +
                       "<td>"+user.sex+"</td>" +
                       "<td>"+user.phonenumber+"</td>" +
                       "<td>"+user.area+"</td>" +
                       "<td>"+user.constellation+"</td>" +
                       "<td>"+user.brthday+"</td>" +
                       "<td>"+user.email+"</td>" +
                       "<td>"+user.registertime+"</td>" +
                    "</tr>");
        var tbodys = $("#tbody");
        tbodys.append(trs);
    }
    function pagess(total) {
        $('.paginList').page({
            leng: total,//分页总数
            activeClass: 'activp', //active 类样式定义
            clickBack: function (pageNumber) {
                $.ajax({
                    url: "/selecctUserAll",
                    type: "post",
                    data: {
                        pageNum: pageNumber,
                    },
                    success: function (result) {
                        console.log(result);
                        if (result.code){
//                    alert(result.msg);
                            console.log(result);
                            //在表格中显示
                            //先清空原来的表格内容
                            $("#tbody").empty("");
                            for (var i in result.data.list){
                                appendData(result.data.list[i])
                            }
                        }else {
                            alert(result.msg);
                        }
                    }
                });
            }
        });
    }
</script>
</body>
</html>
